<template>
  <section class="app-main">
    <router-view v-slot="{ Component, route }">
      <!-- 非缓存页面：过渡动画 -->
      <transition name="fade-transform" mode="out-in">
        <component
          v-if="!route.meta || !route.meta.keepAlive"
          :is="Component"
          :key="route.fullPath + '-plain'"
        />
      </transition>

      <!-- 缓存页面：keep-alive 单独包裹，里面只能有一个子组件 -->
      <keep-alive>
        <component
          v-if="route.meta && route.meta.keepAlive"
          :is="Component"
          :key="route.fullPath + '-alive'"
        />
      </keep-alive>
    </router-view>
  </section>
</template>

<script setup>
/* 无需脚本逻辑 */
</script>

<style scoped>
/* .app-main {
  padding: 84px 16px 16px;
  min-height: 100vh;
  box-sizing: border-box;
  overflow: auto;
} */
.fade-transform-enter-active,
.fade-transform-leave-active {
  transition: opacity .2s, transform .2s;
}
.fade-transform-enter-from,
.fade-transform-leave-to {
  opacity: 0;
  transform: translateY(6px);
}
</style>